<template>
<div>
	<Row type="flex" justify="space-between" class="code-row-bg">
        <Col span="12"></Col>
        <Col span="6" class="text-right">
        	<Button type="success" icon="md-add" class="mr10" @click="create">新建</Button>
        	<Button icon="ios-trash-outline" @click="del">删除</Button>
        </Col>
    </Row>

	<Table ref="dlqtable" :columns="pageData.columns" :data="pageData.data" class="mt10"
	@on-selection-change="selectionChange"
	>
		<template v-for="(item, index1) in pageData.columns" v-if="item.show='1'" 
			slot-scope="{ row, index }" :slot="item.slot">
			<template v-if="item.readonly">
				<span>{{ row[item.slot] }}</span>
			</template>
			<template v-else>
				<Input type="text" v-model="item['edit' + item.slot]" 
				v-if="editIndex === index" />
				<span v-else>{{ row[item.slot] }}</span>
			</template>
		</template>

		<template slot-scope="{ row, index }" slot="action">
			<div v-if="editIndex === index">
				<Button @click="handleSave(index)">保存</Button>
				<!-- <Button @click="handleSave(index)">删除</Button> -->
				<Button @click="editIndex = -1">取消</Button>
			</div>
			<div v-else>
				<Button @click="handleEdit(row, index)">操作</Button>
			</div>
		</template>
	</Table>


</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'testtable',
	
	data () {
		return {

			editIndex: -1,  // 当前聚焦的输入框的行数

			selectedRow : [],
			
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			'pageData', 
		]),
	},

	methods : {

		handleEdit (row, index) {
			this.pageData.columns.forEach((item, index) => {
				this.pageData.columns[index]['edit' + item.slot] = row[item.slot];
			});
			this.editIndex = index;
		},

		handleSave (index) {

			let obj = {};
			this.pageData.columns.forEach((item, index1) => {
				if(item.slot != 'action' && item.type != 'selection'){
					obj[item.slot] = this.pageData.columns[index1]['edit' + item.slot];
				}
			});

			let fun = '';
			let requestType = '';
			const id = this.pageData.data[index].id;
			if(id == undefined){
				fun = '/v1/pn/api';
				requestType = 'POST';
			}else{
				fun = '/v1/pn/api/' + id;
				requestType = 'PUT';
			}

			this.$http({
				fun,
				requestType,
				...obj,
				service : this.pageData.name,
				cb : res => {
					this.$Message.success('操作成功');
					this.init();
				}
			});

			this.editIndex = -1;
		},

		init () {
			console.log('init');
			console.log(this.pageData.name);
			this.$http({
				fun : '/v1/pn/api',
				requestType : 'GET',
				service : this.pageData.name,
				cb : res => {
					this.pageData.data = res;
					console.log(res);
					console.log(this.pageData);
				}
			});
		},

		create () {
			let obj = {};
			this.pageData.columns.forEach((item, index1) => {
				obj[item.slot] = '';
			});

			this.pageData.data.unshift(obj);
			this.handleEdit(obj, 0);
		},

		del () {
			let ids = '';
			this.selectedRow.forEach(item => {
				ids += item.id + ',';
			})

			this.$http({
				fun : '/v1/pn/api/' + ids,
				requestType : 'DELETE',
				service : this.pageData.name,
				cb : res => {
					this.$Message.success('操作成功');
					this.init();
				}
			});

			console.log(ids);
		},

		selectionChange (selection) {
			this.selectedRow = selection;
		},
	},

	watch : {
		'$route': function (to,from) {
			this.init();
		}
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
